<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="./css/bootstrap@5.1.3/bootstrap.min.css" rel="stylesheet">

    <title></title>
    <style>
        .address-label {
            text-align: right;
            font-weight: 700;
        }

        #payOnTime {
            text-decoration: none;
            text-align: center;
        }
    </style>
</head>

<body>
<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script src="./js/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>
<script src="./js/holder.js@2.9.7/holder.js"></script>

<!-- 页面导航 -->
<script src="./js/nav.js"></script>
<!-- /页面导航 -->

<div class="container mt-3">
    <div class="row justify-content-center">
        <div class="col-9">
            <div class="row">
                <div class="col">
                    <h6>订单编号:1231321321</h6>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <!-- 订单数据 -->
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr class="text-center">
                            <th scope="col">#</th>
                            <th scope="col">商品名称</th>
                            <th scope="col">价格</th>
                            <th scope="col">数量</th>
                            <th scope="col">小计</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="text-center">
                            <th scope="row">1</th>
                            <td>商品名称1</td>
                            <td>$10</td>
                            <td>2</td>
                            <td>$20</td>
                        </tr>
                        <tr class="text-center">
                            <th scope="row">1</th>
                            <td>商品名称1</td>
                            <td>$10</td>
                            <td>2</td>
                            <td>$20</td>
                        </tr>
                        <tr class="text-center">
                            <th scope="row">1</th>
                            <td>商品名称1</td>
                            <td>$10</td>
                            <td>2</td>
                            <td>$20</td>
                        </tr>
                        <tr class="text-center">
                            <th scope="row">1</th>
                            <td>商品名称1</td>
                            <td>$10</td>
                            <td>2</td>
                            <td>$20</td>
                        </tr>
                        </tbody>
                    </table>
                    <!-- /订单数据 -->
                </div>
            </div>
            <!--  -->
            <div class="row">
                <div class="col d-flex justify-content-end">
                    商品总金额: $112333
                </div>
            </div>
            <!--  -->
            <!-- 地址信息 -->
            <div class="row">
                <div class="col-6">
                    <div class="mb-3 row">
                        <label for="address" class="col-sm-4 col-form-label address-label">收货地址</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="address">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="inputPassword" class="col-sm-4 col-form-label address-label">收货人</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="inputPassword">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="tel" class="col-sm-4 col-form-label address-label">收货人手机号</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="tel">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <div class="col-sm-8 offset-sm-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                <label class="form-check-label" for="flexCheckDefault">
                                    设置为默认
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <div class="col-sm-8 offset-sm-4">
                            <a id="payOnTime" type="button" class="btn-primary w-100" href="success.html">立即支付</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /地址信息 -->
        </div>
    </div>
</div>


</body>

</html>